<template>
  <!-- 注册成功 -->
  <RegisterOk @changeTabIndex="changestatus($event)" v-if="tabIndex == 3" ref="registerOk" />
  <a-modal v-else v-model="visible" :destroyOnClose="true" :footer="null" @cancel="afterClose" :maskClosable="maskClosable" :closable="false" dialogClass="loginModal">
    <!-- 账号登录 -->
    <template v-if="tabIndex==0">
      <h4 class="titleh4">
        <span class="left">
          <div :class="tabType==0?'click':''" @click="tabType=0">账号登录</div>
          <div :class="tabType==1?'click':''" @click="tabType=1">短信登录</div>
        </span>
        <div class="right">
          <!-- 微信登陆入口 -->
          <div class="icon" @click="tabIndex=1">
            <img src="@/assets/image/loginCode.png" alt="codeImage">
          </div>
        </div>
      </h4>
      <!-- 账号登录 -->
      <template v-if="tabType==0">
        <account @closeModel="changeVisible()" ref="account" style="margin:55px 0 24px;"/>
        <p class="goNew" style="width: 15em;">还没账号，<span @click="tabIndex = 2" style="margin: 0;font-weight:bold;color:#FFBE37;">去注册</span></p>
      </template>
      <!-- 账号登录 Esc -->
      <!-- 短信登录 -->
      <template v-else-if="tabType==1">
        <SMS @closeModel="changeVisible()" ref="sms" @changeTabIndex="changestatus($event)" style="margin:55px 0 24px;"/>
        <p class="texttitle" style="color:#666;">未注册的手机号码验证后自动创建爱心阳光账号</p>
      </template>
      <!-- 短信登录 Esc -->
    </template>
    <!-- 微信登录 -->
    <template v-else-if="tabIndex==1">
      <h4 class="titleh4">
        <span class="left">微信扫码登录</span>
        <div class="sign">账号登陆</div>
        <div class="right">
          <div class="icon" @click="tabIndex=0">
            <img src="@/assets/image/loginPc.png" alt="codeImage">
          </div>
        </div>
      </h4>
      <!-- 二维码登录 -->
      <wechat />
      <!-- 二维码登录 Esc -->
      <p class="goNew">
        <a href="javascript:;" @click="tabIndex=0,tabType=0">密码登录</a>
        <span>|</span>
        <a href="javascript:;" @click="tabIndex=2">立即注册</a>
      </p>
    </template>
    <!-- 注册账号 -->
    <template v-else-if="tabIndex==2">
      <h4 class="titleh4">
        <span class="left">注册账号</span>
        <div class="right">
          <div class="icon" @click="tabIndex=0">
            <img src="@/assets/image/loginPc.png" alt="codeImage">
          </div>
        </div>
      </h4>
      <div class="sign">账号登陆</div>
      <!-- 账号注册 -->
      <register @changeTabIndex="changestatus($event)" ref="register" style="margin-top:47px;" />
      <!-- 账号注册 Esc -->
    </template>
    <!-- 错误 -->
    <template v-else>系统错误</template>
    <div class="agreement">
      <a-checkbox v-model="consentClause">
        我已阅读并同意<a target="_blank" href="/legalProvisions/userAgreement">《用户服务协议》</a>和<a target="_blank" href="/legalProvisions/privacy">《用户隐私政策》</a>
      </a-checkbox>
    </div>
    <img src="@/assets/image/closeLogo.png" @click="visible = false" alt="" class="closelogo">
  </a-modal>
</template>

<script>
// 账号登录
import account from './account.vue'
// 短信登录
import SMS from './SMS.vue'
// 二维码登录
import wechat from './wechat.vue'
// 账号注册
import register from './register.vue'
// 注册成功
import RegisterOk from '@/components/popup/register/registerOk.vue'
export default {
  components: { account, wechat, register, SMS ,RegisterOk },
  data(){
    return{
      visible: false,
      tabType: 0,
      tabIndex: 0,
      consentClause:false,
      maskClosable:false
    }
  },
  mounted(){
    // console.log(this.$store.state.token)
  },
  watch:{
    consentClause(newVal,oldVal){
      if(this.tabIndex == 0 && this.tabType == 0){
        this.$refs['account'].consentClause = newVal;
      }else if(this.tabIndex == 0 && this.tabType == 1){
        this.$refs['sms'].consentClause = newVal;
      }else if(this.tabIndex == 2){
        this.$refs['register'].consentClause = newVal;
      }
    },
    tabType(newVal){
      this.consentClause = false;
    },
    tabIndex(newVal){
      this.consentClause = false;
    }
  },
  methods:{
    // 登陆成功  关闭弹框
    changeVisible(){
      this.tabIndex = 0;
      this.visible = false;
      this.consentClause = false;
    },
    // 弹框关闭
    afterClose(){
      this.consentClause = false;
    },
    // 获取登录状态  个人信息
    // getUserInfo(){
    //   this.$ajax({
    //     url:"/user/userinfo/info/detail",
    //     method:"post"
    //   }).then((res)=>{
    //     if(res.code == 200){
    //       sessionStorage.setItem("token",res.data.token);
    //       sessionStorage.setItem("userName",res.data.userName);
    //       this.$store.commit('changeToken',res.data.token);
    //       this.$store.commit('changeuserName',res.data.userName);
    //     }else{
    //       this.$message.error(res.msg)
    //     }
    //   })
    // },
    changestatus(e){
      this.tabIndex = e;
      if(e == 3){
        setTimeout(()=>{
          this.$refs['registerOk'].visible = true;
        },0)
        // this.getUserInfo()
      }
    }
  }
}
</script>

<style lang="less" scoped>
// /deep/.ant-checkbox-checked{
  /deep/.ant-checkbox-inner::after{
    border: 2px solid #333333!important;
    border-top: 0!important;
    border-left: 0!important;
  }
// }
/deep/.loginModal{
  top:180px;
  .ant-modal-body{
    padding: 60px;
    padding-bottom: 53px;
  }
  .closelogo{
    width: 28px;
    height: 28px;
    position: absolute;
    right: -14px;
    top: -14px;
    cursor: pointer;
  }
}
/deep/.ant-modal-body{
  position: relative;
  .agreement{
    position:absolute;
    z-index: 10000;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 47px;
    background: #F8F8F8;
    text-align: center;
    line-height: 47px;
  }
}
.titleh4{
  display: flex;
  flex-direction: row;
  .left{
    font-size: 24px;
    line-height: 33px;
    flex: 1;
    display: flex;
    >div{
      margin-right: 64px;
      position: relative;
      color: #666;
      cursor: pointer;
      transition: all 0.3s;
      &.click{
        color: #333;
        &::after{
          width: 90px;
        }
      }
      &::after{
        content: '';
        width: 0;
        height: 2px;
        border-radius: 1px;
        background-color: #FFBE37;
        display: block;
        position: absolute;
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%);
        transition: all 0.3s;
      }
    }
  }
  .right{
    .icon{
      margin: -46px -46px 0 0;
      cursor: pointer;
      img{
        height: 59px;
      }
    }
  }
}
.sign{
  position: absolute;
  right: 100px;
  top: 20px;
  padding: 1px 9px;
  font-size: 13px;
  line-height: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #FFBE37;
  background-image: url('~@/assets/image/sign.png');
  background-size: 100% 100%;
}
.goNew{
  text-align: center;
  display: block;
  margin: 0 auto;
  font-size: 15px;
  list-style: 21px;
  a{
    color: #666;
    margin: 0 auto;
  }
  span{
    margin: 0 30px;
    cursor: pointer;
  }
}
.texttitle{
  text-align: center;
  display: block;
  margin: 0 auto;
  font-size: 12px;
  list-style: 21px;
  margin-bottom: 5px;
}
</style>
